<template>
  <div class="wrapper">
    <el-row :gutter="20">
      <el-col :span="24">
        <DiversionView v-if="show" />
      </el-col>
      <el-col :span="24">
        <MilitaryView v-if="show" />
      </el-col>
      <el-col :span="14">
        <ImportantView />
      </el-col>
      <el-col :span="10">
        <GeneralView />
      </el-col>
      <el-col :span="24">
        <NOTAMView />
      </el-col>
    </el-row>
    <AlertView v-if="showAlert" alert-name="SIPDS" />
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted } from "vue";
import useCommonStore from "@/store/common";
import useNotamStore from "@/store/notam.js";

import MilitaryView from "./MilitaryView/index.vue";
import GeneralView from "./General/index.vue";
import ImportantView from "./Important/index.vue";
import NOTAMView from "./NOTAM/index.vue";
import DiversionView from "./Diversion/index.vue";

import AlertView from "@/components/Alert/index.vue";

const commonStore = useCommonStore();
const notamStore = useNotamStore();
// dark mode variable from common store
const showAlert = computed(() => notamStore.disabled);
const darkMode = computed(() => {
  return commonStore.darkMode;
});

const show = ref(true);
let timer = null;
onMounted(() => {
  timer = setInterval(async () => {
    show.value = false;
    await nextTick();
    show.value = true;
  }, 20000);
});
onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
.wrapper {
  font-size: 14px;
  padding: 24px 12px 96px 12px;
}
</style>
